<template>
    <div class="hotPlay" style="padding-bottom:55px;">

        <!-- <ul>
            <li v-for="film in dataList" :key="film.filmId">
                <img :src="film.poster" alt="" @click="goDetail(film.filmId)">
                <h3>{{film.name}}</h3>
                <p class="actor">主演:{{film.actors | actorsfilter}}</p>

            </li>
        </ul> -->

        <!-- 运用vant插件 -->
        <van-list
            v-model="isLoading" 
            @load="onload"
            :finished="isFinished"
            finished-text="没有啦！！！！"
            :immediate-check="false"
            
        >
        <!-- immediate-check每次更新列表，列表从底部弹出 -->


        <!-- store是Vuex是的核心。而Vuex是以相应的规则保证状态以一种可预测的方式发生变化。
        当Vue组件从store中读取状态（state选项）时，
        若store中的状态发生更新时，
        他会及时的响应给其他的组件（类似双向数据绑定） 而且不能直接改变store的状态，
        改变状态的唯一方法就是，显式地提交更改（mutations选项） -->

            <van-cell v-for="film in $store.state.dataList" :key="film.filmId">
                <img :src="film.poster" alt="" @click="goDetail(film.filmId)">
                <h3>{{film.name}}</h3>
                <p class="actor">主演:{{film.actors | actorsfilter}}</p>
            </van-cell>
        </van-list>
        
    </div>
</template>
<script>
import http from "@/utils/http.js"
// 引入importvue里的vant中的List和Cell，并使用Vue.use(List).use(Cell)
import Vue from "vue"
import { List,Cell } from "vant"
Vue.use(List).use(Cell)

// filter过滤
Vue.filter("actorsfilter",(actors) => {
    // console.log(actors);
    if(!actors){
        return "暂时没有演职人员";
    }
    // map映射
    return actors.map(item => item.name).join(" ")
})
export default {
    data(){
        return {
            // dataList:[],
            isLoading:false,
            current:1,
            total:0,
            isFinished:false
        }
    },
    mounted(){

        if(this.$store.state.dataList.length === 0){
            console.log("执行了");
            
            const ps = this.$store.dispatch("getFilmData",{
                current:this.current,
                cityId:this.$store.state.cityId
            });
            ps.then(() => {
                // console.log("数据请求结束");
                
            })
        }
       
   },
   methods:{
       goDetail(id){
           // console.log(id);
           this.$router.history.push("/detail/" + id )
       },
       onload(){
           console.log("开始加载数据");
           // 判断是否加载完毕
           console.log(this.$store.state.dataList.length , this.$store.state.filmTotal);
           
           if(this.$store.state.dataList.length === this.$store.state.filmTotal){
               this.isFinished = true; // 加载完毕的设置
               return;
           }
           // 正在加载
           this.isLoading = true
           // 从第二页开始加载
            this.current++
            this.$store.dispatch("getFilmData",{
                current:this.current,
                cityId:this.$store.state.cityId
            }).then(() => {
                this.isLoading = false;
            });
        
       }
   }
}
</script>
<style lang="scss" scoped>
    .van-cell{
        overflow: hidden;
        padding: 10px;
        img{
            float: left;
            width: 100px;
        }
    }
    .actor{
        width: 150px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
</style>


